<template>
  <div>
    <h2>HOME</h2>
    <div>
      <!-- 1.router-link中to的字符串写法,只能书写路由地址 -->
      <!-- <router-link to="/home/news">news</router-link>
      <router-link to="/home/music">music</router-link> -->

      <!-- 2.router-link中to的对象写法 可以通过path属性来设置路由地址 -->

      <!-- <router-link :to="{path:'/home/news'}">news</router-link>
      <router-link :to="{path:'/home/music'}">music</router-link> -->

      <!-- 
        3.router-link中to的对象写法 可以通过路由的name属性来设置路由地址
       -->

      <!-- 
        注意事项:
          - to的对象写法中,如果和params一起使用,则不能书写path,只能使用name
          - 可选的params参数,要么不写,要么写一个undefined做为值,不能书写一个空字符串
       -->
      <router-link :to="{ name: 'news' }">News</router-link> <br />
      <router-link
        :to="{
          name: 'music',
          params: {
            id: '1',
            time: undefined,
          },
        }"
        >华语music</router-link
      >
      <router-link
        :to="{
          name: 'music',
          params: {
            id: '2',
          },
        }"
        >粤语music</router-link
      >
      <router-link
        :to="{
          name: 'music',
          params: {
            id: '3',
          },
        }"
        >英语music</router-link
      >
      <br />
      <!-- query对象形式 -->
      <router-link
        :to="{
          path: '/home/games',
          query: {
            titl: '暴力摩托',
            version: '2007',
          },
        }"
        >游戏1</router-link
      >
      <!-- //在地址上拼接查询字符串 params才需要route配合 -->
      <router-link to="/home/games?titl=qq飞车&version=2008">游戏2</router-link>

      <br />
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  mounted() {
    // console.log(this.$route);
  },
};
</script>

<style>
a {
  text-decoration-line: none;
}
</style>
